<template>
    <ul class="history-list">
        <li
            v-for="(item, index) in historyList"
            :key="index"
            :class="['history-list-item', activeUrlIndex === index ? 'active-url-class' : '']"
            @click="setActiveUrlIndex(index)"
        >
            <span :style="{ backgroundColor: methodBackgroundColor(item.method) }">{{
                methodDisplay(item.method)
            }}</span>
            <p class="">{{ item.env + item.url }}</p>
        </li>
    </ul>
</template>

<script lang="ts">
    /* eslint-disable */
    import { Vue, Component, Prop } from 'vue-property-decorator';
    import { IntrinsicElements } from '@/appTypes';
    @Component({
        components: {}
    })
    export default class Histories extends Vue<IntrinsicElements> {
        name = 'Histories';
        activeUrlIndex = -1;
        @Prop() historyList: any;
        // private historyList = [
        //     {
        //         id: '1',
        //         method: 'get',
        //         url: '/permission/list/permissionpermissionpermissionpermission',
        //         env: 'https://192.168.101.224:30080'
        //     },
        //     {
        //         id: '2',
        //         method: 'post',
        //         url: '/permission/list/post'
        //     },
        //     {
        //         id: '3',
        //         method: 'put',
        //         url: '/permission/list/put'
        //     },
        //     {
        //         id: '4',
        //         method: 'delete',
        //         url: '/permission/list/delete'
        //     }
        // ];
        public setActiveUrlIndex(index: number) {
            this.activeUrlIndex = index;
        }
        public methodDisplay(method: string) {
            let temp: string = method;
            if (method.length > 4) {
                temp = temp.substr(0, 3);
            }
            return temp.toUpperCase();
        }
        public methodBackgroundColor(method: string) {
            const colorMap: any = {
                get: '#45a54a',
                post: '#ca7c3c',
                put: '#2d73b3',
                delete: '#cf2d2d'
            };
            return colorMap[method.toLowerCase()] || '#aaaaaa';
        }
    }
</script>

<style scoped lang="less" src="./histories.less"></style>
